<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson 12</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // event, $event  第一个参数是event原生对象，当传递其他参数的时候，再需要获取event事件时需要传递$event
    // 绑定多个事件的时候不能用事件的引用了，如@click="handleBtnClick(),handleBtnClick1()" 而不能像单个事件一样 @click="handleBtnClick"

    // 事件修饰符：stop, prevent, capture, self, once, passive
    // 按键修饰符：enter, tab, delete, esc, up, down, left, right
    // 鼠标修饰符：left, right, middle
    // 精确修饰符：exact
    const app = Vue.createApp({
      data() {
        return { counter: 0 };
      },
      methods: {
        handleBtnClick(num, event) {
          console.log(event);
          this.counter += num;
        },
        handleClick() {
          console.log("click");
        },
      },
      template: `
      <div>
        {{counter}}
        <button @click="handleBtnClick(2,$event)"> button </button>
      </div>
      <div>
        <div @click.ctrl.exact="handleClick">123</div>
      </div>
    `,
    });

    const vm = app.mount("#root");

    // stop事件禁止事件冒泡 就是stopPropagation事件
    // <div>
    //   <div @click="handleDivClick"></div>
    //   {{counter}}
    //   <button @click.stop="handleBtnClick">button</button>
    // </div>

    // self事件 只在自己被点击到才触发 不会在子元素被点击到触发  prevent阻止事件默认行为 capture修改冒泡捕获模式 默认的是由内到外
    // once 事件只执行一次
    // <div>
    //   <div @click.self="handleDivClick"></div>
    //   {{counter}}
    //   <button @click="handleBtnClick">button</button>
    // </div>

    // 按键事件 按照js原生的办法是event中的keycode判断是否按下了enter键其他的修饰符如按下了tab键、delete键等
    // <div>
    //   <input @keydown.enter="handleKeyDown">
    // </div>

    //鼠标修饰符同理 按下鼠标左键、鼠标右键
    // 精确修饰符 如ctrl事件 当按下ctrl+shift+鼠标左键也能触发，增加exact修饰符之后只有按下ctrl+鼠标左键才能触发
  </script>
</html>
